import NavBar from '@/components/NavBar';
import { List, Popup, Dialog, Toast } from 'antd-mobile';
import styles from './index.module.scss';
import { getUserProfile } from '@/store/action/user';
import { useEffect, useState } from 'react';
import { RootState, useAppDispatch } from '@/store';
import { useSelector } from 'react-redux';
import { removeAuth } from '@/utils/storage';
import { useNavigate } from 'react-router-dom'

export default function ProfileEdit() {
  // 获取用户个人信息
  const dispatch = useAppDispatch();
  useEffect(() => {
    dispatch(getUserProfile());
  }, [dispatch]);

  const { profile } = useSelector((state: RootState) => state.user);

  const [visible, setVisible] = useState(false);

  const navigate = useNavigate();

  const handleLogout = () => {
    Dialog.confirm({
      title: '温馨提示',
      content: '你确定要退出吗',
      onConfirm: () => {
        // 清理本地存储的 Token 信息
        removeAuth();
        // 跳转到登录页
        navigate('/login')
        // 提示
        Toast.show({ content: '退出登录成功' });
      },
    });
  };

  return (
    <>
      <div className={styles.root}>
        <div className="content">
          {/* 顶部导航栏 */}
          <NavBar>个人资料</NavBar>

          <div className="wrapper">
            {/* 列表一：显示头像、昵称、简介 */}
            <List className="profile-list">
              <List.Item
                arrow
                extra={<img className="avatar" src={profile.photo} alt="" />}
                onClick={() => setVisible(true)}
              >
                头像
              </List.Item>

              <List.Item arrow extra={profile.name}>
                昵称
              </List.Item>

              <List.Item
                arrow
                extra={
                  <span className="intro">{profile.intro || '作者很懒，什么也没有留下...'}</span>
                }
              >
                简介
              </List.Item>

              <List.Item arrow extra={profile.gender === 0 ? '男' : '女'}>
                性别
              </List.Item>
              <List.Item arrow extra={profile.birthday}>
                生日
              </List.Item>
            </List>

            {/* 文件选择框，用于头像图片的上传 */}
            <input className="avatar-upload" type="file" />
          </div>

          {/* 底部栏：退出登录按钮 */}
          <div className="logout">
            <button className="btn" onClick={handleLogout}>
              退出登录
            </button>
          </div>
        </div>

        <Popup
          visible={visible}
          position="bottom"
          bodyClassName="popup-bottom-list"
          onMaskClick={() => setVisible(false)}
        >
          <div className="list-item">拍照</div>
          <div className="list-item">本地选择</div>
          <div className="list-item" onClick={() => setVisible(false)}>
            取消
          </div>
        </Popup>
      </div>
    </>
  );
}
